<!-- Modal -->
<div class="modal fade" id="div-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="h-modal" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="h-modal">修改商品信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body u-card">
                <form id="form-provider-img" enctype="multipart/form-data">
                    <!--图片裁剪框 start-->
                    <div style="display: none" class="tailoring-container" id="container-img">
                        <div class="black-cloth" onclick="closeTailor(this)"></div>
                        <div class="tailoring-content">
                            <div class="tailoring-content-one">
                                <label title="上传图片" for="chooseImg" class="btn btn-primary choose-btn">
                                    <input name="file" type="file" accept="image/jpg,image/jpeg,image/png" id="chooseImg" class="hidden" onchange="selectImg(this)">
                                    选择图片
                                </label>
                                <span class="text-danger">仅支持image/jpg,image/jpeg,image/png格式，图片大小限制在2MB内</span>
                                <div class="close-tailoring" onclick="closeTailor(this)">×</div>
                            </div>
                            <div class="tailoring-content-two">
                                <div class="tailoring-box-parcel">
                                    <img id="tailoringImg">
                                </div>
                                <div class="preview-box-parcel">
                                    <p>图片预览：</p>
                                    <div class="square previewImg"></div>
                                    <div class="circular previewImg"></div>
                                </div>
                            </div>
                            <div class="tailoring-content-three">
                                <button type="button" class="btn btn-warning cropper-reset-btn">复位</button>
                                <button type="button" class="btn btn-warning cropper-rotate-btn">旋转</button>
                                <button type="button" class="btn btn-warning cropper-scaleX-btn">换向</button>
                                <button type="button" class="btn btn-success sureCut" id="sureCut">确定</button>
                            </div>
                        </div>
                    </div>
                </form>
                <form id="form-product-modify" method="post" class="container row">
                    <div class="col-md-5">
                        <img id="finalImg" class="w-100">
                        <nav class="text-center pt-5">
                            <button id="replaceImg" type="button" class="btn btn-primary u-btn-modify-img btn-sm mx-auto">修改商品图片</button>
                        </nav>
                    </div>
                   <div class="col-md-7">
                       <ul>
                           <li>
                               <label for="form-id">商品ID:</label>
                               <input id="form-id" name="id" value="1" style="width: 100px;" readonly>
                               <span style="color: gray; font-size: 10px">* 无法更改</span>
                           </li>
                           <li>
                               <label for="form-name">商品名称：</label>
                               <input id="form-name" name="name" style="width: 100%">
                           </li>
                           <li>
                               <label for="form-provname">供应商</label>
                               <select id="form-provname" name="provider.id">
                               </select>
                               <span style="color: gray; font-size: 10px">* </span>
                           </li>
                           <li>
                               <label for="form-price">商品价格:</label>
                               <input name="price" id="form-price" type="number" style="width: 100px;"/>
                               <span style="color: gray; font-size: 10px">*（单位: 元）</span>
                           </li>
                           <li>
                               <label for="form-stock">商品库存:</label>
                               <input name="stock" id="form-stock" type="number" style="width: 100px;" min="0"/>
                               <span style="color: gray; font-size: 10px">* </span>
                           </li>
                           <li>
                               <label for="form-stock">商品类型:</label>
                               <select name="prodtype.id">
                               </select>
                               <span style="color: gray; font-size: 10px">* </span>
                           </li>
                           <li>
                               <label for="form-detail" class="form-label">商品描述:</label>
                               <textarea name="detail" class="form-control" id="form-detail" rows="3"></textarea>
                               <span style="color: darkred; font-size: 10px">* 限制在128个字符以内, 且不能包含&*%$(#)^*#等特殊符号</span>
                           </li>
                       </ul>
                   </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="btn-modal-cancel" type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
                <button id="btn-modal-ok" type="button" class="btn btn-success btn-sm">确认</button>
            </div>
        </div>
    </div>
</div>